WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: highlighting code changes on an html page

for

Number of posts in this thread: 8 (In chronological order)

From: Don Raikes
Date: Mon, Dec 23 2019 2:36PM
Subject: highlighting code changes on an html page
No previous message | Next message →

I am working on a web tutorial that includes code snippets.

The existing tutorial uses bold text to highlight what code has been added to the snippet. Since a screen reader wouldn't necessarily know that text is bolded, is there a "best practice" for how to indicate changed code in this scenario?



--
Thanks, Donald

"As a leader, to be successful, is to help the people around you to be successful." - Kent Boucher



Accessibility, like security, is better when built-in from the beginning rather than bolted on at the end.


http://www.oracle.com/
Donald Raikes | Accessibility Specialist
Mobile: HYPERLINK "tel:+15202717608"+15202717608 | VOIP: HYPERLINK "tel:+15205744033"+15205744033
Oracle Accessibility Program Office
| Tucson, Arizona

http://www.oracle.com/commitment

Oracle is committed to developing practices and products that help protect the environment

From: Birkir R. Gunnarsson
Date: Mon, Dec 23 2019 2:47PM
Subject: Re: highlighting code changes on an html page
← Previous message | Next message →

How complicated is it?
Does the new code come in blocks or are there attributes that have
been added or changed and are visually highlighted as such?
If you can always separate the new code out by blocks you can use
role="region" and aria-label="added code" as one option for a screen
reader.
If the changes are smaller than that, i.e. changes to individual
attributes, you have to get awfully creative (because screen readers
have awfully poor support for text level semantics).


On 12/23/19, Don Raikes < = EMAIL ADDRESS REMOVED = > wrote:
> I am working on a web tutorial that includes code snippets.
>
> The existing tutorial uses bold text to highlight what code has been added
> to the snippet. Since a screen reader wouldn't necessarily know that text is
> bolded, is there a "best practice" for how to indicate changed code in this
> scenario?
>
>
>
> --
> Thanks, Donald
>
> "As a leader, to be successful, is to help the people around you to be
> successful." - Kent Boucher
>
>
>
> Accessibility, like security, is better when built-in from the beginning
> rather than bolted on at the end.
>
>
> http://www.oracle.com/
> Donald Raikes | Accessibility Specialist
> Mobile: HYPERLINK "tel:+15202717608"+15202717608 | VOIP: HYPERLINK
> "tel:+15205744033"+15205744033
> Oracle Accessibility Program Office
> | Tucson, Arizona
>
> http://www.oracle.com/commitment
>
> Oracle is committed to developing practices and products that help protect
> the environment
>
>
> > > > >


--
Work hard. Have fun. Make history.

From: Tim Harshbarger
Date: Tue, Dec 24 2019 3:37AM
Subject: Re: highlighting code changes on an html page
← Previous message | Next message →

Other things I have seen work would be including a description of the coding
changes that will be made in the code in the paragraphs of text prior to the
code or adding comments in the code indicating An old but still useful
approach is to describe the changes that will be made to the code in the
paragraphs of text prior to the code and/or include comments in the code
that indicate where changes or additions have been made.

Tim Harshbarger
Senior Accessibility Consultant
Deque Systems

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
Birkir R. Gunnarsson
Sent: Monday, December 23, 2019 3:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] highlighting code changes on an html page

How complicated is it?
Does the new code come in blocks or are there attributes that have been
added or changed and are visually highlighted as such?
If you can always separate the new code out by blocks you can use
role="region" and aria-label="added code" as one option for a screen reader.
If the changes are smaller than that, i.e. changes to individual attributes,
you have to get awfully creative (because screen readers have awfully poor
support for text level semantics).


On 12/23/19, Don Raikes < = EMAIL ADDRESS REMOVED = > wrote:
> I am working on a web tutorial that includes code snippets.
>
> The existing tutorial uses bold text to highlight what code has been
> added to the snippet. Since a screen reader wouldn't necessarily know
> that text is bolded, is there a "best practice" for how to indicate
> changed code in this scenario?
>
>
>
> --
> Thanks, Donald
>
> "As a leader, to be successful, is to help the people around you to be
> successful." - Kent Boucher
>
>
>
> Accessibility, like security, is better when built-in from the
> beginning rather than bolted on at the end.
>
>
> http://www.oracle.com/
> Donald Raikes | Accessibility Specialist
> Mobile: HYPERLINK "tel:+15202717608"+15202717608 | VOIP: HYPERLINK
> "tel:+15205744033"+15205744033
> Oracle Accessibility Program Office
> | Tucson, Arizona
>
> http://www.oracle.com/commitment
>
> Oracle is committed to developing practices and products that help
> protect the environment
>
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.
http://webaim.org/discussion/archives

From: Mallory
Date: Tue, Dec 24 2019 5:04AM
Subject: Re: highlighting code changes on an html page
← Previous message | Next message →

Here's a note of something I've run into recently:
I use Windows High Contrast and use the main Black theme (I'm not picky so I don't make a custom one). If it occurs to you to try using the <mark> element with some roles or hidden CSS ::before text or whatever, be aware that for some reason <mark> text doesn't switch its colour like regular text does. I just ran into a site where the only way I could read text was to highlight it with ctrl-A.

It's not that <mark> offers any semantics but sometimes it feels good as a dev to use something that might be closest to meaningful and then actually make it work with AT with extra junk. But for this bug in WHC reason, I'd avoid it if it comes up in your thoughts :)

cheers,
Mallory

On Tue, Dec 24, 2019, at 11:37 AM, Tim Harshbarger wrote:
> Other things I have seen work would be including a description of the coding
> changes that will be made in the code in the paragraphs of text prior to the
> code or adding comments in the code indicating An old but still useful
> approach is to describe the changes that will be made to the code in the
> paragraphs of text prior to the code and/or include comments in the code
> that indicate where changes or additions have been made.
>
> Tim Harshbarger
> Senior Accessibility Consultant
> Deque Systems
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Monday, December 23, 2019 3:48 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] highlighting code changes on an html page
>
> How complicated is it?
> Does the new code come in blocks or are there attributes that have been
> added or changed and are visually highlighted as such?
> If you can always separate the new code out by blocks you can use
> role="region" and aria-label="added code" as one option for a screen reader.
> If the changes are smaller than that, i.e. changes to individual attributes,
> you have to get awfully creative (because screen readers have awfully poor
> support for text level semantics).
>
>
> On 12/23/19, Don Raikes < = EMAIL ADDRESS REMOVED = > wrote:
> > I am working on a web tutorial that includes code snippets.
> >
> > The existing tutorial uses bold text to highlight what code has been
> > added to the snippet. Since a screen reader wouldn't necessarily know
> > that text is bolded, is there a "best practice" for how to indicate
> > changed code in this scenario?
> >
> >
> >
> > --
> > Thanks, Donald
> >
> > "As a leader, to be successful, is to help the people around you to be
> > successful." - Kent Boucher
> >
> >
> >
> > Accessibility, like security, is better when built-in from the
> > beginning rather than bolted on at the end.
> >
> >
> > http://www.oracle.com/
> > Donald Raikes | Accessibility Specialist
> > Mobile: HYPERLINK "tel:+15202717608"+15202717608 | VOIP: HYPERLINK
> > "tel:+15205744033"+15205744033
> > Oracle Accessibility Program Office
> > | Tucson, Arizona
> >
> > http://www.oracle.com/commitment
> >
> > Oracle is committed to developing practices and products that help
> > protect the environment
> >
> >
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > http://webaim.org/discussion/archives
> >
> > > > >

From: Sailesh Panchang
Date: Tue, Dec 24 2019 7:36AM
Subject: Re: highlighting code changes on an html page
← Previous message | Next message →

Simply use the native INS and DEL tags like:
<p>Old price <del>$20.00</del> New price: <ins>$15.00</ins></p>
I hope these meet your needs.
Be sure to include some instruction that SR users will notice advising
them to change JAWS scheme to proffreading with attributes
(JAWS+Alt+S). NVDA reads them by default.
These are supported in FF, Chrome and IE but not Edge.
Thanks and best wishes,
Sailesh


On 12/23/19, Don Raikes < = EMAIL ADDRESS REMOVED = > wrote:
> I am working on a web tutorial that includes code snippets.
>
> The existing tutorial uses bold text to highlight what code has been added
> to the snippet. Since a screen reader wouldn't necessarily know that text is
> bolded, is there a "best practice" for how to indicate changed code in this
> scenario?
>
>
>
> --
> Thanks, Donald
>
> "As a leader, to be successful, is to help the people around you to be
> successful." - Kent Boucher
>
>
>
> Accessibility, like security, is better when built-in from the beginning
> rather than bolted on at the end.
>
>
> http://www.oracle.com/
> Donald Raikes | Accessibility Specialist
> Mobile: HYPERLINK "tel:+15202717608"+15202717608 | VOIP: HYPERLINK
> "tel:+15205744033"+15205744033
> Oracle Accessibility Program Office
> | Tucson, Arizona
>
> http://www.oracle.com/commitment
>
> Oracle is committed to developing practices and products that help protect
> the environment
>
>
> > > > >


--
Sailesh Panchang
Principal Accessibility Consultant
Deque Systems Inc
381 Elden Street, Suite 2000, Herndon, VA 20170
Mobile: 571-344-1765

From: Murphy, Sean
Date: Sun, Jan 05 2020 4:10PM
Subject: Re: highlighting code changes on an html page
← Previous message | Next message →

I think a bug should be lodged with screen reader companies to support attributes and colours, and improve this area over all. As this type of concept can be used with other professions and texts.


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Don Raikes
Sent: Tuesday, 24 December 2019 8:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] highlighting code changes on an html page

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

I am working on a web tutorial that includes code snippets.

The existing tutorial uses bold text to highlight what code has been added to the snippet. Since a screen reader wouldn't necessarily know that text is bolded, is there a "best practice" for how to indicate changed code in this scenario?



--
Thanks, Donald

"As a leader, to be successful, is to help the people around you to be successful." - Kent Boucher



Accessibility, like security, is better when built-in from the beginning rather than bolted on at the end.


http://www.oracle.com/
Donald Raikes | Accessibility Specialist
Mobile: HYPERLINK "tel:+15202717608"+15202717608 | VOIP: HYPERLINK "tel:+15205744033"+15205744033 Oracle Accessibility Program Office
| Tucson, Arizona

http://www.oracle.com/commitment

Oracle is committed to developing practices and products that help protect the environment

From: Jeffrey (JDS)
Date: Sun, Jan 05 2020 8:29PM
Subject: Re: highlighting code changes on an html page
← Previous message | Next message →

If you use something that can be found this would help.
e.g. at work sometimes in emails or documents we use # or * to indicate the start and end of something.
You might put the code snippet inside a read only editbox? I've never tried it but seen it done.

Screen readers can detect color if the user chooses to turn it on. For example JAWS has settings for this. However; it's VERY annoying as a setting. The more verbiage and chatter from the screen reader the less useful it often is.

e.g. you could turn on it announcing all font, size, color, alignment, tabstop change etc... but this greatly reduces the experience for someone.



-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Murphy, Sean
Sent: January 5, 2020 6:10 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] highlighting code changes on an html page

I think a bug should be lodged with screen reader companies to support attributes and colours, and improve this area over all. As this type of concept can be used with other professions and texts.


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Don Raikes
Sent: Tuesday, 24 December 2019 8:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] highlighting code changes on an html page

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

I am working on a web tutorial that includes code snippets.

The existing tutorial uses bold text to highlight what code has been added to the snippet. Since a screen reader wouldn't necessarily know that text is bolded, is there a "best practice" for how to indicate changed code in this scenario?



--
Thanks, Donald

"As a leader, to be successful, is to help the people around you to be successful." - Kent Boucher



Accessibility, like security, is better when built-in from the beginning rather than bolted on at the end.


http://www.oracle.com/
Donald Raikes | Accessibility Specialist
Mobile: HYPERLINK "tel:+15202717608"+15202717608 | VOIP: HYPERLINK "tel:+15205744033"+15205744033 Oracle Accessibility Program Office
| Tucson, Arizona

http://www.oracle.com/commitment

Oracle is committed to developing practices and products that help protect the environment

From: Murphy, Sean
Date: Sun, Jan 05 2020 8:44PM
Subject: Re: highlighting code changes on an html page
← Previous message | No next message

This is not reliable for the web which this discussion is about.

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Jeffrey (JDS)
Sent: Monday, 6 January 2020 2:30 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] highlighting code changes on an html page

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

If you use something that can be found this would help.
e.g. at work sometimes in emails or documents we use # or * to indicate the start and end of something.
You might put the code snippet inside a read only editbox? I've never tried it but seen it done.

Screen readers can detect color if the user chooses to turn it on. For example JAWS has settings for this. However; it's VERY annoying as a setting. The more verbiage and chatter from the screen reader the less useful it often is.

e.g. you could turn on it announcing all font, size, color, alignment, tabstop change etc... but this greatly reduces the experience for someone.



-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Murphy, Sean
Sent: January 5, 2020 6:10 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] highlighting code changes on an html page

I think a bug should be lodged with screen reader companies to support attributes and colours, and improve this area over all. As this type of concept can be used with other professions and texts.


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Don Raikes
Sent: Tuesday, 24 December 2019 8:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] highlighting code changes on an html page

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

I am working on a web tutorial that includes code snippets.

The existing tutorial uses bold text to highlight what code has been added to the snippet. Since a screen reader wouldn't necessarily know that text is bolded, is there a "best practice" for how to indicate changed code in this scenario?



--
Thanks, Donald

"As a leader, to be successful, is to help the people around you to be successful." - Kent Boucher



Accessibility, like security, is better when built-in from the beginning rather than bolted on at the end.


http://www.oracle.com/
Donald Raikes | Accessibility Specialist
Mobile: HYPERLINK "tel:+15202717608"+15202717608 | VOIP: HYPERLINK "tel:+15205744033"+15205744033 Oracle Accessibility Program Office
| Tucson, Arizona

http://www.oracle.com/commitment

Oracle is committed to developing practices and products that help protect the environment