Problem

In the current version on Open Social are some bugs that need to be improved so the content in Open Social is Accessible for everybody.

Web accessibility is an increasingly important resource, and helps ensure equal opportunities and equal access for everyone. The UN Convention on Rights of Persons with Disabilities even recognized the access to information on the Web as a basic human right. The benefits of accessibility are also arguable from a business perspective. Let’s take a look at the facts: 360 million people worldwide suffer from hearing disabilities, and 285 million people are visually-impaired worldwide. These numbers alone demonstrate that a percentage of your website visitors may struggle accessing your content, if not made accessible.

Finally, a common misconception of accessibility is that it’s solely designed for those with disabilities. The truth is, everyone benefits from it. Your audience and conversions will increase if you have accessible content on different platforms and in different ways.

https://www.w3.org/WAI/WCAG20/quickref/

Example who benefits of great accessibility

Remaining Tasks

Follow-ups after retest

The tasks below are listed in priority order based on a recent Open Social accessibility audit.

  1. #3179128: Teasers contain inaccessible image links
  2. #3179425: Custom focus indicator is not accessible
  3. #3179167: Informational teaser icons missing text alternative
  4. #3179171: Profile edit fields should have autocomplete where appropriate

Other open tasks (prioritised)

  1. #3226430: Audit screenreader and keyboard usage in Open Social
  2. #3171821: [Meta] Evaluate the usage of the role attribute accross Open Social

Initial audit tasks

The tasks below are listed in priority order based on a recent Open Social accessibility audit.

  1. #2947668: Focus visible on all link elements
  2. #3171630: Featured content teasers overflow at 320px wide
  3. #2947667: Style skip to content so it is easily visible on each page
  4. #3171792: The search form overlay is in the tab order when it's not visible
  5. #3171512: The information conveyed in teasers is unclear for users of screen readers
  6. #3171606: Fieldsets in forms don't have proper legends causing accessibility issues for screenreaders
  7. #3171778: Notification center button should actually link to notifications to improve accessibility
  8. #3171498: Hero title image edit button does not have an alternative text
  9. #3171502: The SVG icon on the remove image from post button is decorative and should not be visible for screenreaders
  10. #3175829: It's unclear that dropdown menu items are expandable
  11. #3171503: The SVG icon on the actions dropdown for activities should not be visible to screenreaders
  12. #3171785: Help text for search is not visible for screenreaders
  13. #3171617: SocialUserLoginForm should use autocomplete suggestions for improved accessibility
  14. #3171844: The required marker in forms (*) should have a screen reader text to explain the field is required
  15. #3171767: Post visibility radios are not keyboard accessible
  16. #3171775: Alert messages in Open Social are inaccessible
  17. #3171577: Landing pages contain empty links in featured content teasers when viewed with screen readers
  18. #3171613: Views exposed filter block doesn't have a title element
  19. #3171587: Login error message uses a fake list but should use a semantic list instead
  20. #3171566: Back to inbox icon in private messages does not contain an alt text
  21. #2946442: Images in a post don't have a useful alternatieve text
  22. #2947664: H1-h6 to identify headings and hierarchy - WCAG
  23. #3171814: The id btnicon is used multiple times on a page
  24. #2954817: Remove the user profile picture alt field and add a default alt text for such pictures
  25. #3171763: Contrast of small edit buttons (pencil icon) is insufficient
  26. #3171824: Some buttons don't have a text
  27. #2947663: Links fail "visually evident" WCAG guideline

Completed Tasks

Won't fix

In some cases the compliance conformance is dependent on site manager settings. In this case it can not always be solved by Open Social itself, outside of providing education to site managers with helpful UI texts.

The closed as Won't Fix story should contain a comment of why the issue was not resolved.

Comments

basvanos created an issue. See original summary.

mgifford’s picture

Issue tags: +Accessibility

Just tagging this. Thanks @basvanos

bramtenhove’s picture

Issue summary: View changes
bramtenhove’s picture

Thanks Bas for creating this inventory of accessibility issues. I will ask @maikelkoopman to go through the list to see what the low hanging fruit is.

For items that are harder to solve we might need to create some child issues. Is that ok with you?

slowflyer’s picture

Just let me share my thoughts on the first item about images an Alternative text.

For posts with a photo the filename is used for all other images (f.e preview images of topics and events in streams) no Alternative text shows up, if not specified.
The Alt-text field is not required in Open Social.

If you run a website, where editors insert the content you can force them to specify an Alternative text by simply making the field required.
But for sites like Communities, Portals, Intranets - at the end all sites with user generated content - forcing the users to specify an Alternative text will lead through less engagement.

One thing possible today is using a Cognitive service that can "look at" and describe the image. This describtion can than be used to generate the Alternative text. But these services offered f.e. by Google or Microsoft need an additional registration (and payment) and can't be bundled with a distribution like Open Social for free or on an automatic install.

I played around last days an came up with: https://www.drupal.org/project/auto_alter

After module is enabled and configured, it automatically creates Alternative Texts for images, when a user did'nt specify one.
To add this module to Open Social (disabled) would be easy. But to make use of it, the enduser needs to register at Micrsoft Azure for using the service.

basvanos’s picture

@bramtenhove Thanks for replying and i'm oke with splitting up!

basvanos’s picture

Title: Improve Accessibility, so disabled people could read content in Open social » Improve Accessibility of Open Social, so it complies with GWAC AA

This wil be the parent story for all Accessibility issues in Open Social

basvanos’s picture

Title: Improve Accessibility of Open Social, so it complies with GWAC AA » Improve accessibility of Open Social, so it complies with GWAC AA
basvanos’s picture

Issue summary: View changes
basvanos’s picture

Issue summary: View changes
basvanos’s picture

Issue summary: View changes
basvanos’s picture

Title: Improve accessibility of Open Social, so it complies with GWAC AA » Improve accessibility of Open Social, so it complies with WCAG2.0 AA
basvanos’s picture

Issue summary: View changes
basvanos’s picture

Category: Bug report » Feature request
ok_lyndsey’s picture

I find this a really nice W3C starter guide for locking in the accessibility fundamentals

Easy Checks - A First Review of Web Accessibility

I've got a simple audit spreadsheet that I use for this type of audit - it might be useful for the team - I'll share in slack - I don't have a google doc version

basvanos’s picture

Assigned: basvanos » Unassigned
mgifford’s picture

Another easy starting point is just running your site through http://wave.webaim.org/extension/

This is useful for both the public & admin pages of your site.

Is this a meta issue for Open Social and accessibility? Would that be useful to coordinate?

xinyuma’s picture

Version: 8.x-1.6 » 8.x-6.x-dev
andrewmacpherson’s picture

Title: Improve accessibility of Open Social, so it complies with WCAG2.0 AA » Improve accessibility of Open Social, so it conforms to WCAG2.0 AA

Fun fact: the verb "to comply" doesn't appear anywhere in WCAG. It uses the term conformance.

kingdutch’s picture

Title: Improve accessibility of Open Social, so it conforms to WCAG2.0 AA » [Meta] Improve accessibility of Open Social, so it conforms to WCAG2.0 AA
Version: 8.x-6.x-dev » 8.x-9.x-dev
Assigned: Unassigned » kingdutch
Issue summary: View changes

This is still relevant for current versions of Open Social. I've updated the issue summary to contain an overview of open and closed tickets. Somewhat easier to grok than the list of child issues.

kingdutch’s picture

Issue summary: View changes
kingdutch’s picture

Issue summary: View changes
kingdutch’s picture

Issue summary: View changes
kingdutch’s picture

Issue summary: View changes
kingdutch’s picture

Issue summary: View changes
kingdutch’s picture

Issue summary: View changes
kingdutch’s picture

kingdutch’s picture

kingdutch’s picture

kingdutch’s picture

kingdutch’s picture

kingdutch’s picture

kingdutch’s picture

Issue summary: View changes
kingdutch’s picture

kingdutch’s picture

kingdutch’s picture

Issue summary: View changes
kingdutch’s picture

Issue summary: View changes
kingdutch’s picture

Issue summary: View changes