Re: [External Sender] <ol start="3"> Is this accessible?

Admittingly - there is inconsistent use of ordered and un-ordered lists, but this will be cleaned up in our redesign.

A list might describe the ordered steps of a surgery that could be sequential.

A list might also just be a list, where order is not important and it could just be bullets <ul>.

I’m working on writing standards and styles for this, but it’s looking more and more like I have to change editorial style guides as well — not just design/code.

It’s also sounding like start=“3” is generally acceptable and an ok use within WCAG standards. But I’m likely dealing with other html structure issues here. Also - there doesn’t seem to be a written standard that says it’s bad to interrupt a grouping of like content with unrelated content. 

The more written standards I can point to, the more buy-in I have.  “Bad User Experience” or “Just bad Design” doesn’t receive much buy-in :( Hence, why I was hoping there was something in the Accessibility standards that I could lean on here.

Thanks,
Jeana





> On Nov 19, 2019, at 1:21 PM, Brian Lovely <brian.lovely@capitalone.com> wrote:
> 
> Is there a necessary sequential logic to the list items that is necessary to understanding the list as a whole? For instance a series of steps:
> 
> <ol>
>      <li>Turn doorknob</li>
>      <li>Open door</li>
>      <li>Step through</li>
> </ol>
> 
> On Tue, Nov 19, 2019 at 1:48 PM Jeana Clark <jclark@veritashealth.com <mailto:jclark@veritashealth.com>> wrote:
> I mean something like
> 
> <ol>
> <li><p>Long surgery Description</p>
>       <p>More surgery description</p></li>
> </ol>
> 
> <div><ad></div>
> 
> <ol start=“2”>
> <li><p>2nd Long surgery description
>       <p>More 2nd long surgery description</p></li>
> <li><p>3rd Long surgery description
>       <p>More 34d long surgery description</p></li>
> <li><p>4th Long surgery description
>       <p>More 4th long surgery description</p></li>
> </ol>
> 
> 
> 
> 
> 
> 
> Jeana Clark
> 
>> On Nov 19, 2019, at 12:36 PM, Brian Lovely <brian.lovely@capitalone.com <mailto:brian.lovely@capitalone.com>> wrote:
>> 
>> Ugh, you mean like:
>> 
>> <ol>
>>      <li>Something</li>
>>      <div>An advertisement</div>
>>      <li>Something else</li>
>> </ol>
>> 
>> That's a violation of WCAG 2.1 SC 4.1.1 Parsing. The ol contains a non-supported child (the div). Before any accessibility is looked at, a page must be able to pass an HTML linter with no errors. This would throw a parent/child error.
>> 
>> On Tue, Nov 19, 2019 at 1:25 PM Marc Haunschild <haunschild@mhis.onmicrosoft.de <mailto:haunschild@mhis.onmicrosoft.de>> wrote:
>> Then its a matter of presentation (CSS) not semantics (HTML).
>> 
>> Respect the separation of concerns principle and things will become much easier.
>> 
>> Flex box offers a easy way to make space between two elements when using margin: auto for example - in this gap you can place your add - although I still might not understand all aspects of your particular component, I think I would use something like this
>> 
>> <ul>
>>   <li>{text}</li>
>>   <li>{text}</li>
>>   <li>{text}</li>
>>   <li>{advertisement}</li>
>> </ul>
>> 
>> With order you can rearrange the items and by putting the ad at the end you don’t interrupt the logical order
>> 
>> In a future redesign you won't need to touch the HTML - all changes can be made in the CSS (or SASS/LESS if you prefer to work with a preprocessor)
>> 
>> Marc
>> 
>>> On 19. Nov 2019, at 18:58, Jeana Clark <jclark@veritashealth.com <mailto:jclark@veritashealth.com>> wrote:
>>> 
>>> Hi Patrick - Thanks for your comment.
>>> 
>>> The problem is we want to put an ad in the middle of a list - but not make it a list item. So sometimes if it’s a numbered list, we will close the list, insert the ad, and restart the list (hence start=“3” on the ol) 
>>> 
>>> 
>>> 
>>> 
>>> 
>>> Jeana Clark
>>> 
>>> 
>>> 
>>>> On Nov 19, 2019, at 11:48 AM, Patrick H. Lauke <redux@splintered.co.uk <mailto:redux@splintered.co.uk>> wrote:
>>>> 
>>>> On 19/11/2019 17:12, Jeana Clark wrote:
>>>>> Sometimes the lists were used as a design solution… writers wanted to make the content more ’scannable’, and they really aren’t list items. They’re just bulleted, indented paragraphs — those I can deal with with redesign.
>>>>> But sometimes they are ‘lists’ as like, here are 5 treatments for your lower back pain.. but each ‘list item’ is a thorough multi-paragraphed description of the treatment, within a list item.
>>>> 
>>>> Even in those cases, you should be able to just stick them all in an <li>...</li> without the need for breaking up a list and starting it at a particular number later, unless I'm missing something.
>>>> 
>>>> P
>>>> -- 
>>>> Patrick H. Lauke
>>>> 
>>>> www.splintered.co.uk <https://urldefense.com/v3/__http://www.splintered.co.uk/__;!0Ns9_1dOjwg!LbjzArpgSoEASxfWUXXXLwkCCFWvrg2bfhy6xx3Bwckv9YpzbWfQuBfgSsBEedUrTQwiLQ$> | https://github.com/patrickhlauke <https://urldefense.com/v3/__https://github.com/patrickhlauke__;!0Ns9_1dOjwg!LbjzArpgSoEASxfWUXXXLwkCCFWvrg2bfhy6xx3Bwckv9YpzbWfQuBfgSsBEedVvmm5Vyg$>
>>>> http://flickr.com/photos/redux/ <https://urldefense.com/v3/__http://flickr.com/photos/redux/__;!0Ns9_1dOjwg!LbjzArpgSoEASxfWUXXXLwkCCFWvrg2bfhy6xx3Bwckv9YpzbWfQuBfgSsBEedWx4pJZHw$> | http://redux.deviantart.com <https://urldefense.com/v3/__http://redux.deviantart.com/__;!0Ns9_1dOjwg!LbjzArpgSoEASxfWUXXXLwkCCFWvrg2bfhy6xx3Bwckv9YpzbWfQuBfgSsBEedW-YlDhJA$>
>>>> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>>>> 
>>> 
>> 
>> 
>> 
>> -- 
>> Brian Lovely
>> Capital One Digital Accessibility
>> 804.389.1064
>> 
>> 
>> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
>> 
>> 
> 
> 
> 
> -- 
> Brian Lovely
> Capital One Digital Accessibility
> 804.389.1064
> 
> 
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
> 
>