Asked  7 Months ago    Answers:  5   Viewed   23 times

I have a simple text that gets updated on an action and I want that to be announced by the screen reader. But I don't want that text to be visible on the web page. I tried display: none and visibility: hidden, but seems like they are not accessible by the screen reader softwares. I found a way to make this work - that is by absolute positioning the element all the way with negative 999999 value which will make it off screen and hidden from the webpage. I am not really a fan of this solution. Is there a more elegant way to achieve this?

<span class="aria-invisible" aria-live="polite">5 selections have been made.</span>

.aria-invisible {
   display: none; //either of these two attributes
   visibility: hidden;
}

 Answers

41

I did encounter this problem in the past. Bootstrap has this sweet class sr-only that actually hides the content on the webpage but is accessible by the screen readers. You can check this link

Moreover, if you are not using bootstrap, you can simply implement the class yourself in your code.

.aria-invisible {
      border: 0; 
      clip: rect(0 0 0 0); 
      height: 1px;  
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
<span class="aria-invisible">5 selections have been made. </span>

I hope this helps.

Tuesday, June 1, 2021
 
BenOfTheNorth
answered 7 Months ago
46

Try this for taking screenshot of current Activity:

Android 2.2 :

private static Bitmap takeScreenShot(Activity activity)
{
    View view = activity.getWindow().getDecorView();
    view.setDrawingCacheEnabled(true);
    view.buildDrawingCache();
    Bitmap b1 = view.getDrawingCache();
    Rect frame = new Rect();
    activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
    int statusBarHeight = frame.top;

    DisplayMetrics displaymetrics = new DisplayMetrics(); 
    mContext.getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);

    int width = displaymetrics.widthPixels;
    int height = displaymetrics.heightPixels;

    Bitmap b = Bitmap.createBitmap(b1, 0, statusBarHeight, width, height  - statusBarHeight);
    view.destroyDrawingCache();
    return b;
}
private static void savePic(Bitmap b, String strFileName)
{
    FileOutputStream fos = null;
    try
    {
        fos = new FileOutputStream(strFileName);
        if (null != fos)
        {
            b.compress(Bitmap.CompressFormat.PNG, 90, fos);
            fos.flush();
            fos.close();
        }
    }
    catch (FileNotFoundException e)
    {
        e.printStackTrace();
    }
    catch (IOException e)
    {
        e.printStackTrace();
    }
}
Sunday, June 27, 2021
 
Anele
answered 6 Months ago
17

ARIA does not define how assistive tech are to expose UI. It does define how browsers are required to expose roles, states and properties via accessibility APIs. It's the same with HTML in general, the HTML spec does not define/require UI, that is left up to the browsers to decide. In the case of aria-label (for example) it is a requirement in ARIA that aria-label is mapped to the accessible name property in accessibility APIs, it is not a requirment that screen readers announce it, or not, on any given element (i.e. expose as part of the aural UI). General observed rule is that screen readers will announce accessible names and accessible descriptions on interactive elements. They will announce accessible names on most grouping elements and sectioning elements. They will announce neither on most text level elements.

Note: the above also applies to any element that has it's default semantics overidden with ARIA roles. For example ARIA widget roles will have both acc name and description announced, like native HTML interactive elements.

Wednesday, August 11, 2021
 
Grzegorz
answered 4 Months ago
74

In the MDN example, a screen reader will just speak just the word "close" since aria-label overrides the text in the button. This will work even if you re-use the code without Bootstrap.

In your example, a screen reader will speak "close x" since you are doing nothing to hide the "x" from screen readers. You are also adding a text node to then hiding it with a class.

I would use the example from MDN.

Saturday, September 25, 2021
 
Stepan Yakovenko
answered 2 Months ago
17

The jQuery UI CSS framework does this by positioning elements far off-screen, e.g.

.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
Thursday, October 21, 2021
 
David Hodgson
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share