Decoration elements and Accessibility

Question

I'm not sure how to deal with anything(except images) that is used for design/decoration only in terms of accessibility. For example, if in case like this I'll use an image, I'd simply use alt="" or use CSS background image, so the AT for example will ignore it. But what if I'm using some <div> or anything else? It can be a div with some CSS styling that is presented in a code-way, instead of image, or it can be some text with CSS styling so it will be just for decoration(instead of images), or really, anything else. How should I mark it so it will be ignored in a proper way by AT?

Simple example(for request):

<div><span>For Decoration</span></div>

div{
  width:0; height:0;
  border-bottom:116px solid #009;
  border-left:500px solid #900;
  margin:0 auto;
}
div span{
  display:block;
  position:absolute;
  margin:0 auto;
  left:0;
  right:0;
  width:150px;
  color:#fff;
}

Answer 1

There are two solutions to this:

1) if you are using an empty tag such as a div with no text in it, the screen reader will ignore it automatically. You don't need to do anything in particular.

2) if you are using a tag with text inside you should: a) give it an aria-hidden="true" if you don't want the screen-reader to read the text or b) give it a role="presentation" if you do want the screen-reader to read the text but not announce it as a particular type of element.

-------------------

Based on the comments on this post I have added code below showing an example. It shows when you wouldn't need to do anything (the first and last div) and when you would want to use aria-hidden and role="presentation".

The top line is purely for decoration. Part of it is empty divs and part of it is text. The different words for "Hello" in the p tag should be seen but don't need to be read since they're purely ornamental which is why I am using role and aria-hidden on it.

.end {
  display: inline-block;
  width: 5%;
  height: 20px;
  border: 5px solid transparent;
}
.end-left {
  border-left-color: #999;
  border-top-color: #999;
}
.end-right {
  border-right-color: #999;
  border-top-color: #999;
}
.languages {
  display: inline-block;
  width: 80%;
  text-align: center;
  font-family: 'copperplate', 'century gothic';
  color: #999;
}
.languages span {
  display: inline-block;
  width: 15%;
}

<div class="end end-left"></div>
<p class="languages" aria-hidden="true" role="presentation">
  <span class="english">Hello</span>
  <span class="french">Bonjour</span>
  <span class="italian">Ciao</span>
  <span class="spanish">Hola</span>
  <span class="hinid">Namaste</span>
  <span class="persian">Salaam</span>
</p>
<div class="end end-right"></div>
<h1>Languages</h1>
<p>Welcome to your first language lesson. You will learn how to speak fluently.</p>