Screen Reader accessibility for custom member fields
How Do I?
Hi, my site is geared towards blind users many using screen readers to access the website. On the registration page, I need to edit the custom member fields so I can add a title tag to each input field, but I’m not seeing how to do this. Tried adding alt/title tags with in the div of the field name (I’m super novice at this), but that didn’t work. Anyone have any ideas/know where I go to add this? Thanks.
Hi Natalie! To my knowledge, the most reliable way to support most screen readers is to use a <label> for each form field using the id= attributes to link them, e.g.:
<label for="favorite_color>Favorite Color</label>
<input type="text" id="favorite_color" name="favorite_color"></code></pre>
<p>I’m pretty sure JAWS will read title attribute <em>as well</em>, but to use them they need to go on the input tag itself:</p>
<pre><code><input type="text" id="favorite_color" name="favorite_color" title="Favorite Color">Hope that helps!
Hi, my question is where do I go to ad that tag to the custom member fields? Specifically on the registration page, I see an area where EE cycles through the custom profile fields but on the template it just shows a field_name and field tag, but no actual html code, so I don’t know where to add it for it to show up.
Oh sorry, right. In the current member themes, you’d need to construct those inputs manually rather than use the {field} variable as a shortcut. Their name needs to be m_field_id_# where # is the field ID of your custom field. You can create those inputs however you need, instead of using the custom_field variable pair, which is there as a convenience.
ah got it, thanks so much.