I am trying to get my ChromeVox screen reader to read the bubble message that pops up when the user tabs over to the tooltip icon, but it doesn't and the documentation out there is not very clear on what I thought should have been a simple solution.
this is the code in the file I am trying to refactor to get the screen reader to read the tooltip:
<div class="sub-item content-spaced">
<span class="text" tabindex="0">{{translations.taxEstLabel}}</span>
{{#hasEstimatedTax}}
<span class="value" tabindex="0">{{totalEstimatedTax}}</span>
{{/hasEstimatedTax}}
{{^hasEstimatedTax}}
<div class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"></div>
{{/hasEstimatedTax}}
</div>
This is a Handlebarjs template by the way.
I'm not familiar with Handlebarjs but your <div> that's a tooltip doesn't appear to have any text between the <div> and </div>. Is the text injected in between when the div receives focus? If text is inserted, I'm guessing when the div receives focus, the screen reader will announce what's in currently in the div (which is nothing), and then your js code runs that injects the text.
If this is how it works, then you can add aria-live="polite" to the div. That will allow the screen reader to read any text changes in the div.
<div aria-live="polite" class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"></div>
As a side question, why do your <span> and <div> elements have tabindex="0"? I know tabindex will allow the keyboard focus to move to the element, but generally you shouldn't set tabindex on a non-interactive element. If you added tabindex for the sole purpose of allowing a screen reader to tab to the text so that they can hear it being read, that's not necessary. Screen reader users can navigate to every element in the DOM using various screen reader shortcut keys, such as 'H' to go to the next heading, 'T' to go to the next table, 'L' to go to the next list, etc. If your html is using semantic elements such as <h2>, <table>, and <ul>, then your code will work great with a screen reader.
Related
In my webpage, I need a disabled textbox to show content (very long).
<input disabled type="text" value="a very long long long text...">
In Chrome, we can select the text in the disabled input to scroll to view all content.
However, In MS Edge, it seems that the disabled textbox is not selectable, therefore, it cannot be scrolled to view entire content.
Is there anyway to customize CSS to select text on disabled textbox on Ms Edge.
Actually content is selectable from disabled textbox in Edge but it will not scroll like it scrolls in Chrome.
<!DOCTYPE html>
<html>
<body>
<form action="">
Text : <input type="text" name="txt1" value="Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries." disabled><br>
<input type="submit" value="Submit"><br>
<textarea rows="4" cols="50">
</textarea>
</form>
</body>
</html>
Output in Edge browser:
So if your requirement is to select the text than it is possible as you can see in my testing result.
If your requirement is to scroll the content then at present it is not possible with MS Edge browser. As a work around, you can try to use read only instead of disabled as already suggested by #Turnip. It will allow user to scroll the text in textbox.
I will try to submit the feedback to Microsoft via our internal channel regarding this issue.
The design I am implementing has a generic "Account" button whose only content is a user icon (and a tiny dropdown icon).
Is it enough to add a title attribute to the button ("Your account"), or should I add text inside the button that I simply hide visually (while keeping accessible to screen readers), or both?
If you are using an input image button, use its alt attribute:
<input type="image" src="account-icon.png" alt="Your account">
If you are using a button with img, use img’s alt attribute:
<button type="button"><img src="account-icon.png" alt="Your account"></button>
If you are using an a with img, use img’s alt attribute:
<img src="account-icon.png" alt="Your account">
If you are adding the icon via CSS (instead of HTML), you should include a text label in the HTML and visually hide it with CSS.
For usability, you might consider using both, an icon and text. But this might be discussed at User Experience SE. See, for example, the question "When to use icons vs. icons with text vs. just text links?".
For deciding which alt text to use, see my answer to the question "What should the ALT text be for an image that is also a link?". You should not use the title attribute for specifying the alternative text.
So if it's an icon button I have an example on CodePen: A super accessible button with tooltip
This is the markup I use:
<button type="button" class="button">
<span class="button-icon" aria-hidden="true" data-icon="x"></span>
<span class="button-text"><strong>Navigation menu</strong></span>
</button>
You can hide the text content with css and make it visible on hover/focus. See example for more deatail on CSS.
Here is a list of what this method accomplish accessibility wise:
Is a native <button> and therefor inherits:
Mouse & keyboard (enter & space) clickability
Keyboard foucusability
Announciation as a button for screen readers
CSS injects icon, for non-visual web browsers
Hides icon for screen readers
Uses hidden text, for screen readers
Hides text by z-index -1 insead of off-screen to make it tapable with iOS using VoiceOver screen reader
Shows text as tooltip on hover and focus
Tooltip won't disappear on mouse over or slightly outside. This makes the text readable with full zoom.
You can either add a button text and hide id visually, or you can add an alt attribute to your icon (if it's an img). The latter is even better, on my opinion.
The following article provides information on using ARIA to enhance SVG accessibility: Using ARIA to enhance SVG accessibility. It's dated 2013 and contains several compatibility charts as well as the following code snippet, which had the best accessibility:
<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="title desc">
<title id="title">Circle</title>
<desc id="desc">Large red circle with a black border</desc>
<circle role="presentation" cy="60" r="55" stroke="black" stroke-width="2" fill="red" />
</svg>
Put that inside a button and you should enjoy wide support. Of course, now that SVG2.0 has landed the ARIA usage may change slightly.
If using CSS ::after to place your icon your button will probably look something like this:
<button></button>
In which case you could do this and skip ARIA entirely:
<button>the label</button>
Otherwise the following should do the trick:
<button aria-label="the label"></button>
And here's the SVG Accessibility API Mappings (draft as of Jan 2019) which maps how SVGs should work in conjunction with accessibility APIs if you want to get more technical.
Though if you just stick a title inside the SVG it will likely work now simply because it's obvious.
Use aria-label for this. Example:
<button aria-label="Close" onclick="myDialog.close()">X</button>
From MDN:
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.
I have a link within an unordered list as follows:
<li class="savelink">
<span>Save</span>
</li>
Normally the screen readers read "Save". Is it possible, and with which attribute, to change that without changing the actual link text?
The business need is to have a link, styled with an icon. The icon will be complementary to the link text. For example:
An icon of a "+" sign and a link text "menu" that is equal to the "add menu item" action.
I tried aria-label, with no success.
try
<span aria-hidden="true">Save</span>
As the icons carry meaning, you should include them using img. Then use the alt attribute accordingly. You might have to reformulate some phrases, e.g. when you need to express "Add menu item" with an icon representing "add", you’d need to use "menu item" (instead of "menu") to the link.
<img src="add-icon.png" alt="Add"> menu item
The alternative to using img would be to use CSS to display the icons and visually hide the full link text, so that it is only read to screen reader users (or those users that deactivate CSS). Here you could use the clip method.
<span class="visually-hide">Add</span> menu item
I don't understand why you don't want to change the actual link text if the destination performs different actions. Or, use an actual image as an icon (as it communicates meaning rather than being purely decorative) and use alt text on that.
Are there any CSS toolkits that let you reproduce radio button functionality but using photos / images laid out in a grid? For example, a grid of auto models on a rental car site, where the user needs to select a preferred vehicle for their rental application by clicking on the car's picture.
This is similar to HTML selection menu widgets, except:
The layout is a grid, not a line of items (i.e. needs to wrap).
The currently-selected item is persistent and always visible, optionally with a checkmark (or other icon-based indicator to show selection)
It would be great if the grid laid itself out intelligently (recalculates rows and columns) when the browser resizes.
It would also be nice to have the option to choose between single-selection (radio button) and multiple-selection (checkbox button) modes.
I thought this would be straightforward but I've had a really hard time finding anything like this. The JQuery UI button functionality is close but (I think) doesn't provide image-centric buttons or a reflowing grid.
This should work for you. You wrap each of your cars in a DIV, put a checkbox inside, and then wrap the image in a label for the checkbox. Clicking on the image checks the box.
The jQuery then changes the class of the wrapping DIV to selected so that you can style it to make it obvious that the car is selected.
jQuery
jQuery(document).ready(function ($) {
'use strict';
$('input:checkbox').click(function () {
$(this).closest('.photo').toggleClass('selected');
});
});
HTML
<div class="photo">
<input type="checkbox" name="image[0][status]" value="1" />
<label for="image[0][status]">
<img src="#" />
</label>
</div>
I wrote code that simply generates a table gridview. The last column provides a print button option for each record. if the user clicks the print button a pop up window is displayed with background image and three pieces of data. it looks great on the screen but when you print the form, everything will print (data) but the background image. Any suggestions? thanks.
For this issue you can use Frédéric Hamidi solution and change the browser settings or you can do the following with CSS.
wrap your code in div tags and call the background image as an img object. and set the background color to white. for some strange reason this does the trick and users will not need to change the browser settings to print an image.
#container {
width:500px;
height:393px;
background-color: #FFFFFF;
}
<div id="container">
<img src="image.png" style="position: absolute;">
<table>
<tr><td>test</td></tr>
</div>
The browser ultimately decides whether or not to print background images. For instance, under Internet Explorer, you need to enable that feature in the Advanced tab of the Internet Options dialog box.