Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(accessibility): add alternate text to .gm-resize-trigger object #67

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix(accessibility): add alternate text to .gm-resize-trigger object #67

wants to merge 5 commits into from

Conversation

Kristinita
Copy link

@Kristinita Kristinita commented Sep 23, 2020 •
edited
Loading

1. Changes

  1. I added text to .gm-resize-trigger object.
  2. After it I minified index.js use UglifyJS.

2. Argumentation

2.1. Summary

For successful lighthouse validation.

2.2. Details

  1. <object> elements do not have [alt] text
  2. <object> elements must have alternate text

Screen readers have no way of translating non-text content into text announced to users. Instead, they read out alternative text. For screen reader users to obtain the information contained in embedded object elements which must contain short, descriptive alternative text.

The object element defines an embedded object within a document. It is used to embed multimedia (audio, video, applets, etcetera.) or another web page into the document. The object element needs a text alternative so that users of screen readers know the contents of the object.

3. Steps to reproduce

I opened pages with Gemini Scrollbar in Chromium:

  1. Before: Gemini Scrollbar documentation page.
  2. After: one of pages of my site on localhost.

→ I ran lighthouse from Chrome DevTools → see below parts of lighthouse reports.

4. Behavior

4.1. Before

  • Object from DevTools Elements panel:

    <object class="gm-resize-trigger" type="text/html" tabindex="-1" data="about:blank"></object>

  • Part of lighthouse report:

Object without alt text

<object> elements do not have [alt] text

Screen readers cannot translate non-text content. Adding alt text to <object> elements helps screen readers convey meaning to users. Learn more.

4.2. After

  • Object from DevTools Elements panel:

    <object class="gm-resize-trigger" type="text/html" tabindex="-1" data="about:blank">Resize trigger</object>

  • Part of lighthouse report:

Object with alt text

<object> elements have [alt] text

Screen readers cannot translate non-text content. Adding alt text to <object> elements helps screen readers convey meaning to users.

5. Techniques used

Node.textContent.

Internet Explorer 8 doesn’t support it, but Gemini Scrollbar supports IE9+. Another browsers must successfully support Node.textContent.

6. Testing environment

  1. Windows 10.0.18363 Pro N for Workstations 64-bit EN
  2. Chromium 85.0.4183.102 (Official Build) (64-bit) with --disable-extensions flag.
  3. uglify-js 3.9.4

Thanks.

Kristinita added a commit to Kristinita/KristinitaPelican that referenced this pull request Nov 16, 2020
@Kristinita
chore(architecture): big refactoring
86da6f8 
perf(jquery) remove JQuery, replace all JQuery dependencies

perf(deferjs): migrate to Defer.js — https://appseeds.net/defer.js/demo.html

refactor(pelican): single template for articles and pages with includes — https://bernhard.scheirle.de/posts/2016/March/07/seo-how-to-exclude-pages-and-articles-with-pelican/#how-to-use-the-noindex-html-meta-tag-with-pelican

perf(fonts): increase fonts downloading speed — https://csswizardry.com/2020/05/the-fastest-google-fonts/

refactor(peru): remove all Python third-party packages from repository — buildinspace/peru#205 (comment)

upd(python): Python and Pipenv to latest versions

fix(just_table): apply just_table for all types of articles and pages — burakkose/just_table#9

upd(css): migrate from PurifyCSS to PurgeCSS

lint(links): checkPages for checking internal links — https://www.npmjs.com/package/check-pages

fix(accessibility): some improvements for the own code and Gemini scrollbar — noeldelgado/gemini-scrollbar#67

fix(favicons): apply RealFavicon for all HTML

lint(csslint): drop CSSLint support, I can’t ignore CSS4 parts of a code — CSSLint/csslint#720 (comment)
@Kristinita
Copy link
Author

@noeldelgado, please add finally this line:

obj.textContent = 'Resize trigger';

Thanks.

@Kristinita
Copy link
Author

Type: Update ⬆

@noeldelgado, please review the changes.

1. Changes

I have updated my changes:

- obj.textContent = 'Resize trigger';
+ obj.setAttribute('aria-label', 'Resize trigger');

2. Argumentation

For Lighthouse 11.4.0 obj.textContent = 'Resize trigger'; ceased to be valid. Lighthouse 11.4.0 links to the Deque University article where the problem <object> elements must have alternate text is solved as follows:

Add alternative text to all embedded <object> elements using either aria-label, aria-labelledby, or title attributes.

3. Comparison

  1. Default index.js file, https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js:

    Default index.js

  2. My previous changes, https://cdn.jsdelivr.net/gh/Kristinita/gemini-scrollbar@fd4400bd136ae02e34d94db3d0570d8ebce7acf1/index.js:

    Previous changes

  3. My current changes, https://cdn.jsdelivr.net/gh/Kristinita/gemini-scrollbar@KiraPatchObjectAltText/index.js:

    Current changes

4. Environment

  1. gemini-scrollbar 1.5.3
  2. Node.js 21.4.0
  3. Lighthouse 11.4.0

Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@Kristinita