How to create a more accessible website for a wider range of people with disabilities
We can create a more accessible website for a wider range of people with disabilities including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these with 100% Lighthouse Results
What is Lighthouse ?
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
How to run Lighthouse?
1. Go to your website right click and inspect
2. You will find Audit panel along with Source, Console, Elements
3. Perform the Audit on choosing Desktop or Mobile device.
4. After few seconds, Lighthouse gives you the result of the page.
Let's get Started with key elements
1.Web accessibility standards
1. Web content - refers to any part of a website, including text, images, forms, and multimedia, markup code, scripts and applications
2. User agents - software that people use to access web content, including desktop graphical browsers, voice browsers, mobile phone browsers, multimedia players and plug-ins
3. Authoring tools - software or services that people use to produce web content, including code editors, document conversion tools, content management systems, blogs, database scripts, and other tools.
2. User Information:
1. Text alternatives for non-text content
Short equivalents for images, including icons, buttons, and graphics
Description of data represented on charts, diagrams, and illustrations
Brief descriptions of non-text content such as audio and video files
Labels for form controls, input, and other user interface components
2. Accessibility requirements related to text alternatives
3. Stories related to text alternatives
3. Content can be presented in different ways
Meeting this requirement allows content to be correctly read aloud, enlarged, or adapted to meet the needs and preferences of different people.For users to be able to change the presentation of content, it is necessary that:
1.Headings, lists, tables, input fields, and content structures are marked-up properly
2.Sequences of information or instructions are independent of any presentation
3.Browsers and assistive technologies provide settings to customize the presentation
4.Content is easier to see and hear
People with color blindness do not use any particular tools and rely on a proper design that provides sufficient color contrast between text and its surrounding background. For others, audio that is automatically played could interfere with text-to-speech
1. Color is not used as the only way of conveying information or identifying content
2. Default foreground and background color combinations provide sufficient contrast
3. When users resize text up to 400% or change text spacing, no information is lost
4. Text reflows in small windows (“viewports”) and when users make the text larger
5.Images of text are resizable, replaced with actual text, or avoided where possible
6. Users can pause, stop, or adjust the volume of audio that is played on a website
7.Background audio is low or can be turned off, to avoid interference or distraction
5. User interface operations and navigation
Many people do not use the mouse and rely on the keyboard to interact with the Web. This requires keyboard access to all functionality, including form controls, input, and other user interface components.
Functionality is available from a keyboard
1. All functionality that is available by mouse is also available by keyboard
2. Keyboard focus does not get trapped in any part of the content
3. Web browsers, authoring tools, and other tools provide keyboard support
Users have enough time to read and use the content
1. Stop, extend, or adjust time limits, except where necessary
2.Pause, stop, or hide moving, blinking, or scrolling content
3. Postpone or suppress interruptions, except where necessary
4.Re-authenticate when a session expires without losing data
Content that flashes at certain rates or patterns can cause photosensitive reactions, including seizures. Flashing content is ideally avoided entirely or only used in a way that does not cause known risks.
Content does not cause seizures and physical reactions
1. Do not include content that flashes at particular rates and patterns
2.Warn users before flashing content is presented, and provide alternatives
3.Provide mechanisms to switch off animations, unless they are essential
Users can easily navigate, find content, and determine
1.Pages have clear titles and are organized using descriptive section headings
2.There is more than one way to find relevant pages within a set of web pages
3.Users are informed about their current location within a set of related pages
There are ways to bypass blocks of content that are repeated on multiple pages
The keyboard focus is visible, and the focus order follows a meaningful sequence
The purpose of a link is evident, ideally even when the link is viewed on its own
Users can use different input modalities beyond keyboard
1.Gestures that require dexterity or fine movement have alternatives that do not require high dexterity
2.Components are designed to avoid accidental activation, for example by providing undo functionality
3.Labels presented to users match corresponding object names in the code, to support activation by voice
Functionality that is activated by movement can also be activated through user interface components
Buttons, links, and other active components are large enough to make them easier to activate by touch
6. Robust content and reliable interpretation
Content is compatible with current and future user tools
Robust content is compatible with different browsers, assistive technologies, and other user agents. Examples of how this can be achieved include:
1.Ensuring markup can be reliably interpreted, for instance by ensuring it is valid
2.Providing a name, role, and value for non-standard user interface components
NectarSpot team executed the Quick and solid build of AMP website. Not afraid of small tweaks here and there. The team has, from the beginning of project, focus on conversion and provided a seamless workflow for my prospects to visit, educate and finally purchase on my e-commerce portal. They provided design, development on AMP framework and helped to host e-commerce portal on scalable and secure google cloud. We are looking forward to working with them in future for other projects as well.
Read more to gain insights from our blogs. Receive latest marketing insights, data and inspiration by subscribing .
Start Your Project Today (100% Satisfaction Guaranteed)
NectarSpot Inc. is an integrated digital marketing agency specializing in Design & Development of Web, Mobile & Voice Applications.
We excel in providing Optimization, Automation, PPC & Analytics services to high performing brands across industries.