search

drunkenvalley / no-pressure

Welcome to the No Pressure Community repository for the website. This is a public project, enabling the community to join and help us make the community better and better.
https://no-pressure.eu/
5 stars 8 forks source link

Accessibility #17

Open drunkenvalley opened 1 year ago

drunkenvalley commented 1 year ago

We should verify that the website is accessible.

  1. Keyboard accessibility
  2. Screen-reader accessibility
  3. Automated accessibility tests

Tasklist

Recommended tools

Accessibility tools

Screenreaders

NVDA tips

Useful hotkeys:

drunkenvalley commented 1 year ago

AccessibilityChecker.org

Accessibility report from accessibilitychecker.org.

Status: Not compliant Score: 38% Critical issues: 4 items (30%) Passed audits: 9 items (70%) Required manual audits: 90 items

Critial issues (4)

👁 Visual: Background and foreground colors do not have a sufficient contrast ratio

If the characters on your website have a low color contrast ratio, people with visual impairments or color-blindness will find it very difficult to navigate your site.

For example, someone who is color-blind will view the green and red apples in the top image as simply yellow or grey apples, as demonstrated in the image below.

Image

How to solve it

Make sure all text on your page meets the minimum color contrast ratios specified by WCAG:

Failing elements

👁🖐 Visual & motor: <frame> or <iframe> elements do not have a title

Screen readers have commands to quickly jump between headings or to specific landmark regions. By using correct heading and landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technologies.

How to solve it

One way to check your heading structure is to ask, 'If someone created an outline of my page using only the headings, would it make sense?'

Failing elements

👁🖐 Visual & motor: Image elements do not have [alt] attributes

In order to communicate content on a webpage, website owners use text, images and videos. Although this is great for the majority of people, users that rely on screen readers will not have the same experience if you don’t add description next to each image. When you add a description, the screen reader will read out loud to the user, for example, “image: woman holding bag at 30% discount.”

Image

How to solve

Provide an alt attribute for every element. Most images should have short and descriptive alt attributes.

Failing elements

👁🖐 Visual & Motor: Links do not have a discernible name

Links must have a unique name or short description attached to them in the code to enable screen readers to read out loud. Otherwise the screen reader will simply read out loud “link,” and the user won't have a contextual understanding of where this link leads.

image

How to solve

Similar to buttons, links primarily get their accessible name from their text content. Avoid filler words like "Here" or "Read more;" instead, put the most meaningful text into the link itself.

Failing elements

drunkenvalley commented 1 year ago

Curiously, on the contrast issue Firefox only mentions two:

The orange color: image

Discord widget's game indicator: image

drunkenvalley commented 1 year ago

Recommended tools

Accessibility tools

Screenreaders

NVDA tips

Useful hotkeys:

drunkenvalley commented 1 year ago

Added the recommended tools to the wiki.

drunkenvalley commented 1 year ago

AccessibilityChecker.org

Accessibility report from accessibilitychecker.org.

Status: Not compliant Score: 80% Critical issues: 3 items (30%) Passed audits: 21 items (70%) Required manual audits: 68 items

Critial issues (3)

👁🖐 Visual & Motor: Access key values are not unique

Links must have a unique name or short description attached to them in the code to enable screen readers to read out loud. Otherwise the screen reader will simply read out loud “link,” and the user won't have a contextual understanding of where this link leads.

How to solve it

Similar to buttons, links primarily get their accessible name from their text content. Avoid filler words like "Here" or "Read more;" instead, put the most meaningful text into the link itself.

👁 Visual: ARIA ID’s are not unique

Each ID in your HTML document must be unique. Using the same ID on more than one element may cause screen readers and other assistive technologies to only announce the first element with the shared ID, preventing users from accessing the later elements.

How to solve it

Go over the code in your website and change an ID value if it’s not unique.

👁 Visual: Form elements do not have associated labels

Labels ensure that form controls are announced properly by assistive technologies like screen readers. Assistive technology users rely on these labels to navigate forms. Mouse and touchscreen users also benefit from labels because the label text makes a larger click target.

How to solve it

There are two ways to associate a label with a form element:

  1. Place the input element inside a label element: 
<label>
    Receive promotional offers?
    <input type='checkbox'>
</label>
  1. Or use the label's for attribute and refer to the element's ID: 
<input id='promo' type='checkbox'>
<label for='promo'>Receive promotional offers?</label>