Image

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 cpck 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, pghthouse 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

Thank you and Read More for blogs click here

Receive latest marketing insights, data and inspiration

View Blogs ➞ Subscribe ➞

Start your Project Today